import { useState, useEffect, useRef } from 'react';
import { NavBar, Toast } from 'antd-mobile';
// import { Editor, EditorState } from 'draft-js';
import { Editor } from '@tinymce/tinymce-react';

import './style.scss';

export default function({ onOk, onClose }) {
  const editorRef = useRef(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (loading) {
      Toast.show({ content: '编辑器加载中... ', duration: 0 });
    } else {
      Toast.clear();
    }
  }, [loading]);

  const handleSend = () => {
    if (!editorRef.current) {
      return;
    }
    const richText = editorRef.current.getContent();
    onOk(richText);
  }

  return (<div className="sendRichTextPage">
    <NavBar
      onBack={onClose} style={{ background: '#fff', border: 'none' }}
      right={<a onClick={handleSend}>发送</a>}>富文本</NavBar>
    <Editor
      apiKey='your-api-key'
      onInit={(evt, editor) => { editorRef.current = editor; setLoading(false) }}
      init={{
        height: '600',
        menubar: false,
        plugins: [
          'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
          'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
          'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
        ],
        toolbar: 'undo redo | blocks | ' +
          'bold italic forecolor | alignleft aligncenter ' +
          'alignright alignjustify | bullist numlist outdent indent | ' +
          'removeformat | help',
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
      }}
    />
  </div>)
}